<template>
  <div class="min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 relative overflow-x-hidden">
    <!-- 粒子背景 -->
    <SimpleParticleBackground />
    
    <!-- 动态渐变背景 -->
    <div class="fixed inset-0 -z-20">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-900/20 via-purple-900/20 to-slate-900/20" />
      <div class="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl animate-pulse" />
      <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-500/10 rounded-full blur-3xl animate-pulse delay-1000" />
    </div>

    <!-- 玻璃拟态头部 -->
    <header class="sticky top-0 z-40 backdrop-blur-xl bg-slate-900/30 border-b border-white/10">
      <div class="container mx-auto px-6 py-6">
        <div class="text-center mb-8 animate-fade-in">
          <div class="flex items-center justify-center gap-3 mb-4">
            <n-icon size="32" class="text-blue-400">
              <SparklesIcon />
            </n-icon>
            <h1 class="text-4xl md:text-5xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-blue-400 bg-clip-text text-transparent">
              AI 导航
            </h1>
            <n-icon size="32" class="text-purple-400">
              <SparklesIcon />
            </n-icon>
          </div>
          <p class="text-white/70 text-lg max-w-2xl mx-auto">
            精选优质AI工具，助力创作与工作效率提升
          </p>
        </div>

        <!-- 搜索栏 -->
        <SearchBar />
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-6 py-8">
      <!-- 分类筛选 -->
      <CategoryFilter />

      <!-- 网站网格 - 简单网格布局 -->
      <div class="animate-fade-in-delay">
        <div v-if="hasResults" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <div 
            v-for="(website, index) in filteredWebsites" 
            :key="website.id" 
            :style="{ animationDelay: `${index * 100}ms` }" 
            class="animate-slide-up"
          >
            <WebsiteCard :website="website" />
          </div>
        </div>
        <div v-else class="text-center py-16 opacity-0 animate-fade-in">
          <div class="bg-white/5 backdrop-blur-md border border-white/10 rounded-2xl p-8 max-w-md mx-auto">
            <div class="text-6xl mb-4">🔍</div>
            <h3 class="text-xl font-semibold text-white mb-2">未找到相关工具</h3>
            <p class="text-white/60">
              尝试调整搜索关键词或选择其他分类
            </p>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="mt-16 py-8 border-t border-white/10 bg-slate-900/50 backdrop-blur-md">
      <div class="container mx-auto px-6 text-center">
        <p class="text-white/60">
          © 2025 AI 导航网站. 探索无限可能的AI世界
        </p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { NIcon } from 'naive-ui'
import { Sparkles as SparklesIcon } from 'lucide-vue-next'
import SimpleParticleBackground from '@/components/SimpleParticleBackground.vue'
import SearchBar from '@/components/SearchBar.vue'
import CategoryFilter from '@/components/CategoryFilter.vue'
import WebsiteCard from '@/components/WebsiteCard.vue'
import { useAppStore } from '@/stores/useAppStore'
import { useWebsiteFilter } from '@/composables/useWebsiteFilter'
import { websites } from '@/data/config'

const appStore = useAppStore()

// 使用筛选 Hook
const { filteredWebsites, hasResults } = useWebsiteFilter({
  websites,
  searchQuery: computed(() => appStore.searchQuery),
  activeCategory: computed(() => appStore.activeCategory)
})

// 更新 Store 中的筛选结果
onMounted(() => {
  appStore.setFilteredWebsites(filteredWebsites.value)
})
</script>

<style>
@import './assets/tailwind.css';

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
</style>